<template>
  <div>
    <myTabel :list="list">
      <template #head>
        <th>序号</th>
        <th>姓名</th>
        <th>照片</th>
        <th>年龄</th>
      </template>

      <template #body="{item, index}">
        <tr>
          <td>{{ index + 1}}</td>
          <td>{{ item.name }}</td>
          <td class="img-box">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
          </td>
          <td style="width: 80px;">
            <sTag v-model="item.age"></sTag>
          </td>
        </tr>
      </template>
    </myTabel>
  </div>
</template>

<script>
import myTabel from '@/components/myTabel'
import sTag from './components/sTag.vue';
export default {
    components:{
        myTabel,
        sTag
    },
    data(){
      return{
        list: [
          {
            id: 1,
            name: '张三',
            img: require('@/assets/zhangsan.jpg'),
            age: 18
          },
          {
            id: 2,
            name: '李四',
            img: require('@/assets/tt.png'),
            age: 20
          },
          {
            id: 3,
            name: '石俊',
            img: require('@/assets/jg.webp'),
            age: 20
          },
          {
            id: 3,
            name: '王方伟',
            img: require('@/assets/wg.jpg'),
            age: 20
          },
          {
            id: 3,
            name: '王成越',
            img: require('@/assets/lw.webp'),
            age: 20
          },
        ]
      }
    }
}
</script>

<style>

</style>